<template>
  <div class="app">
    <div class="box_right">
      <!-- 导航栏 -->
      <div class="nav">
        <div class="nav_title">
          <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
          >
            <el-menu-item index="1" class="el_items">所有订单</el-menu-item>
            <el-menu-item index="2" class="el_items">待付款</el-menu-item>
            <el-menu-item index="3" class="el_items">待发货</el-menu-item>
            <el-menu-item index="4" class="el_items">待收货</el-menu-item>
            <el-menu-item index="5" class="el_items"> 待评价</el-menu-item>
          </el-menu>
        </div>

        <!-- 订单回收站 -->
        <div class="nav_recycle">
          <svg
            t="1652535500013"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="2833"
            width="20"
            height="20"
          >
            <path
              d="M413.742545 118.946909c0-27.136 21.992727-49.128727 49.105455-49.128727h98.280727c27.136 0 49.128727 21.992727 49.128728 49.128727v49.128727H905.076364c31.325091 0 47.662545 14.987636 49.035636 44.962909l0.093091 4.189091c0 32.744727-16.384 49.105455-49.128727 49.105455H118.923636c-31.325091 0-47.662545-14.964364-49.035636-44.939636L69.818182 217.204364c0-32.744727 16.384-49.105455 49.128727-49.105455h294.795636V118.923636z"
              fill="#E63832"
              p-id="2834"
            ></path>
            <path
              d="M831.348364 315.485091L789.201455 863.418182A98.257455 98.257455 0 0 1 691.2 954.181818H332.8c-51.362909 0-94.045091-39.563636-97.978182-90.763636L192.651636 315.508364h638.696728z m-427.426909 173.917091a36.840727 36.840727 0 0 0-34.909091 38.656l11.613091 220.811636a36.840727 36.840727 0 1 0 73.588363-3.84l-11.496727-220.788363a36.840727 36.840727 0 0 0-38.749091-34.909091l-0.046545 0.069818z m211.944727 0a36.840727 36.840727 0 0 0-38.725818 34.839273l-11.543273 220.788363a36.840727 36.840727 0 1 0 73.611636 3.84l11.543273-220.811636a36.840727 36.840727 0 0 0-34.909091-38.702546v0.046546z"
              fill="#FF5E59"
              p-id="2835"
            ></path>
          </svg>
          <span>订单回收站</span>
        </div>

        <div class="line"></div>
      </div>
      <!-- 订单号搜索 -->
      <div class="order_query">
        <div>
          <el-input
            class="order_query_input"
            v-model="input"
            placeholder="输入商品标题或订单号进行搜索"
          ></el-input>
        </div>
        <div>
          <el-button class="order_query_button">订单搜索</el-button>
        </div>
      </div>

      <!-- 订单商品属性标题 -->
      <div class="order_titles">
        <div class="order_titles_item_1 item_public">宝贝</div>
        <div class="order_titles_item_2 item_public">单价</div>
        <div class="order_titles_item_3 item_public">数量</div>
        <div class="order_titles_item_4 item_public">商品操作</div>
        <div class="order_titles_item_5 item_public">实付款</div>
        <div class="order_titles_item_6 item_public">交易状态</div>
        <div class="order_titles_item_7 item_public">交易操作</div>
      </div>
      <!-- 分页按钮 -->
      <div class="order_page_button">
        <el-button-group class="order_page_button_items">
          <el-button type="primary" icon="el-icon-arrow-left">上一页</el-button>
          <el-button type="primary"
            >下一页<i class="el-icon-arrow-right el-icon--right"></i
          ></el-button>
        </el-button-group>
      </div>
      <!-- 商品订单信息 -->

      <div class="order_info" v-for="(item, index) in form" :key="index">
        <!-- 商品标题 -->
        <div class="order_info_title">
          <!-- 订单号 -->
          <div class="order_info_numbers">
            <input
              type="checkbox"
              name="订单号"
              class="order_info_checkbox"
              @click="chang_click(index, item)"
            />
            <span class="order_info_date">{{ item.orderInfoDate }}</span>
            &nbsp;
            <span class="order_number">订单号：{{ item.orderNumber }}</span>
          </div>
          <!--店铺信息 -->
          <div class="order_info_shopname">
            <img :src="item.orderInfoShopImg" alt="" />
            <router-link to="/shop"> {{ item.shopName }}</router-link>
          </div>
          <!--联系商家 -->
          <div class="order_info_contac">
            <!-- <svg
              t="1652598070358"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="11807"
              width="18"
              height="18"
            >
              <path
                d="M298.883249 0s41.583756 67.573604 51.979695 145.543147C158.538071 207.918782 23.390863 374.253807 23.390863 571.77665c0 249.502538 218.314721 452.22335 488.609137 452.22335s488.609137-202.720812 488.609137-452.22335c0-233.908629-192.324873-426.233503-436.629442-452.223351C470.416244 51.979695 298.883249 0 298.883249 0z m259.898477 602.964467H465.218274c31.187817-67.573604 10.395939-155.939086-25.989848-181.928934 36.385787-10.395939 51.979695-20.791878 88.365483-31.187817 57.177665 51.979695 57.177665 171.532995 31.187817 213.116751z m254.700508-31.187817h-93.563452c41.583756-77.969543 15.593909-155.939086-31.187818-181.928934 36.385787-15.593909 51.979695-20.791878 88.365483-31.187818 67.573604 57.177665 62.375635 171.532995 36.385787 213.116752z"
                p-id="11808"
                fill="#1C9EFF"
              ></path>
             -->
            <router-link to="/index/customerService"
              ><span>和我联系方</span></router-link
            >
          </div>
          <!-- 删除订单 -->
          <div class="order_info_delete">
            <svg
              t="1652598121822"
              class="icon_d"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="13705"
              width="20"
              height="20"
              @click="delete_oder(index)"
            >
              <path
                d="M624.390244 187.317073H399.609756c-41.209756 0-74.926829-33.717073-74.926829-74.926829V74.926829c0-41.209756 33.717073-74.926829 74.926829-74.926829h224.780488c41.209756 0 74.926829 33.717073 74.926829 74.926829v37.463415c0 41.209756-33.717073 74.926829-74.926829 74.926829zM399.609756 49.95122c-13.736585 0-24.97561 11.239024-24.97561 24.975609v37.463415c0 13.736585 11.239024 24.97561 24.97561 24.97561h224.780488c13.736585 0 24.97561-11.239024 24.97561-24.97561V74.926829c0-13.736585-11.239024-24.97561-24.97561-24.975609H399.609756z"
                fill="#AFFCFE"
                p-id="13706"
              ></path>
              <path
                d="M237.268293 274.731707h549.463414c54.946341 0 99.902439 44.956098 99.902439 99.902439v549.463415c0 54.946341-44.956098 99.902439-99.902439 99.902439H237.268293c-54.946341 0-99.902439-44.956098-99.902439-99.902439V374.634146c0-54.946341 44.956098-99.902439 99.902439-99.902439zM99.902439 124.878049h824.195122c21.229268 0 37.463415 16.234146 37.463415 37.463414s-16.234146 37.463415-37.463415 37.463415H99.902439c-21.229268 0-37.463415-16.234146-37.463415-37.463415s16.234146-37.463415 37.463415-37.463414z"
                fill="#2F77F1"
                p-id="13707"
              ></path>
              <path
                d="M387.121951 487.02439c13.736585 0 24.97561 11.239024 24.97561 24.97561v274.731707c0 13.736585-11.239024 24.97561-24.97561 24.97561s-24.97561-11.239024-24.97561-24.97561V512c0-13.736585 11.239024-24.97561 24.97561-24.97561z m249.756098 0c13.736585 0 24.97561 11.239024 24.97561 24.97561v274.731707c0 13.736585-11.239024 24.97561-24.97561 24.97561s-24.97561-11.239024-24.97561-24.97561V512c0-13.736585 11.239024-24.97561 24.97561-24.97561z"
                fill="#AFFCFE"
                p-id="13708"
              ></path>
            </svg>
          </div>
        </div>
        <!-- 商品信息 -->
        <div class="order_info_box">
          <!-- 商品图片 -->
          <div class="order_info_img">
            <img :src="item.orderShopImg" alt="" />
          </div>
          <!-- 商品参数 -->
          <div class="order_info_paramter">
            <div class="order_info_paramter_title">
              {{ item.shopTitle }}
            </div>
            <div class="order_info_paramter_param">{{ item.orderParam }}</div>
          </div>
          <!-- 商品标价 -->
          <div class="order_info_price">
            <span class="order_info_price_yuan"> ￥{{ item.oderPricel }} </span>
            <br />
            <span class="order_info_price_xian"> ￥{{ item.oderPricen }} </span>
          </div>
          <!-- 商品数量 -->
          <div class="order_info_nums">{{ item.orderNums }}</div>
          <!-- 商品操作 -->
          <div class="order_info_operation">
            {{ item.orderOperation[0] }}<br />{{ item.orderOperation[1] }}<br />
          </div>
          <!-- 付款金额 -->
          <div class="order_info_money">￥{{ item.orderMoney }}</div>
          <!-- 交易状态 -->
          <div class="order_info_stutes">
            {{ item.orderStutes[0] }}<br />
            {{ item.orderStutes[1] }}
            <el-button class="stures" type="primary" round>确认收货</el-button>
            <br />
          </div>
          <!-- 交易操作 -->
          <div class="order_info_transaction">
            {{ item.orderTransaction[0] }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: "",
      activeIndex: "1",
      chang_click_index: "",

      form: [
        {
          orderInfoDate: "2020-04-18",
          orderNumber: "2614356217400375026",
          orderInfoShopImg:
            "https://gtd.alicdn.com/tps/i2/TB1aJQKFVXXXXamXFXXEDhGGXXX-32-32.png",
          shopName: "南极人罗风专卖店",

          orderShopImg:
            "https://img.alicdn.com/imgextra/i4/2928278102/O1CN01xWpCJT29ilfN1k8g7_!!0-item_pic.jpg_80x80.jpg",
          oderPricel: "99.00",
          oderPricen: "59.00",
          shopTitle:
            "21金维他多维元素片30片多种复合维生素BC维他命药品官方旗舰店",
          orderParam: "套餐类型：30片/盒",
          orderNums: "1",
          orderOperation: ["申请售后", "投诉商家"],
          orderMoney: "49.90",
          orderStutes: ["交易成功", "查看物流"],
          orderTransaction: ["追加评价"],
        },
        {
          orderInfoDate: "2020-04-18",
          orderNumber: "2614356217400375026",
          orderInfoShopImg:
            "https://gtd.alicdn.com/tps/i2/TB1aJQKFVXXXXamXFXXEDhGGXXX-32-32.png",
          shopName: "南极人罗风专卖店",

          orderShopImg:
            "https://img.alicdn.com/imgextra/i4/2928278102/O1CN01xWpCJT29ilfN1k8g7_!!0-item_pic.jpg_80x80.jpg",
          oderPricel: "99.00",
          oderPricen: "59.00",
          shopTitle:
            "21金维他多维元素片30片多种复合维生素BC维他命药品官方旗舰店",
          orderParam: "套餐类型：30片/盒",
          orderNums: "1",
          orderOperation: ["申请售后", "投诉商家"],
          orderMoney: "49.90",
          orderStutes: ["交易成功", "查看物流"],
          orderTransaction: ["追加评价"],
        },
      ],
    };
  },
  created() {
    this.get_save_data();
    this.Tojson();
  },
  methods: {
    get_save_data() {
      var data = JSON.parse(localStorage.getItem("formData"));
      if (data != null) {
        this.form = data;
      }
    },
    saveas() {
      var form = this.form;
      localStorage.setItem("formData", JSON.stringify(form));
    },
    Tojson() {
      var formjson = this.form;
      var jsonform = JSON.stringify(formjson);
      console.log(jsonform);
    },
    chang_click(index, item) {
      console.log(index);
      console.log(item);
    },

    delete_oder(index) {
      console.log(index);
      // this.form[index] = undefined;
      // this.form.splice(index);

      this.form.splice(index, 1);
      console.log(this.form);
      this.saveas();
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>

<style scoped>
/* 商品信息 */

.stures {
  width: 82px;
  height: 32px;
  line-height: 6px;
  padding-left: 12px;
  margin-left: -10px;
}

.order_info_transaction {
  float: right;
  margin-right: 19px;
  width: auto;
}

.order_info_stutes {
  float: left;
  width: 120px;
}

.order_info_money {
  float: left;
  width: 120px;
}

.order_info_operation {
  float: left;
  width: 120px;
}

.order_info_nums {
  float: left;
  font-weight: 600px;
  width: 50px;
}

.order_info_price_yuan {
  text-decoration: line-through;
}

.order_info_price {
  float: left;
  align-content: center;
  margin-left: 3px;
  width: 100px;
  color: #000;
}

.order_info_paramter_param {
  margin-top: 5px;
  color: rgb(115, 94, 94);
}

.order_info_paramter_title {
  color: red;
}

.order_info_paramter {
  float: left;
  margin-left: 10px;
  width: 310px;
}

.order_info_img {
  float: left;
  width: 80px;
  height: 80px;
}

.order_info_box {
  width: 97%;
  height: 120px;
  margin: 0 auto;
  margin-top: 20px;
  font-size: 14px;
  /* background-color: rgb(155, 96, 210); */
}

/*  商品订单信息*/

.order_info_contac a span {
  opacity: 0;
}

.order_info_contac a {
  background-image: url(//img.alicdn.com/tps/i1/T15AD7FFFaXXbJnvQ_-130-60.gif);
  text-decoration: none !important;
  width: 25px;
  height: 25px;
  zoom: 1;
}
.order_info_delete svg:hover {
  cursor: pointer;
  width: 26px;
  height: 26px;
}
.order_info_delete {
  float: right;
  margin: 6px 20px 0px 0px;
}

.order_info_contac {
  float: left;
  margin-left: 25px;
}

.order_info_shopname img {
  width: 18px;
  height: 18px;
}

.order_info_shopname {
  float: left;
  width: 110px;
  overflow: hidden; /*超过盒子大小替代成 ...  */
  white-space: nowrap;
  text-overflow: ellipsis;

  margin-left: 20px;
}

.order_info_date {
  font-weight: 800;
  margin-left: 6px;
}

.order_info_numbers {
  float: left;
  width: 400px;
  height: auto;
  margin-left: 20px;
}

/* 商品标题  */
.order_info_title {
  height: 40px;
  width: 100%;
  background-color: rgb(245, 245, 245);
  line-height: 40px;
  font-size: 14px;
}

.order_info {
  width: 100%;
  height: 160px;
  background-color: white;
  border-radius: 9px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  margin-bottom: 20px;
}

/*分页按钮 */

.order_page_button_items {
  float: right;
}

.order_page_button {
  height: 40px;
  width: 100%;
  margin-bottom: 10px;
}

/*  订单商品属性标题*/
.item_public {
  float: left;
  margin-top: 4px;
  height: 30px;
  width: 120px;
  text-align: center;
  color: rgb(56, 52, 52);
}

.order_titles_item_1 {
  width: 400px;
  /* background-color: burlywood; */
}

.order_titles_item_2 {
  width: 100px;
  /* background-color: blue; */
}

.order_titles_item_3 {
  width: 30px;
  /* background-color: hotpink; */
}

.order_titles {
  width: 100%;
  height: 36px;
  background-color: rgb(245, 245, 245);
  font-size: 14px;
}

/* 订单搜索 */
.order_query_input {
  float: left;
  width: 75%;
  height: 100%;
}

.order_query_button {
  float: left;
  width: 25%;
  height: 100%;
}

.order_query {
  margin: 6px 0px 6px 10px;
  height: 40px;
  width: 400px;
}

/* 订单列表部分 */
.nav_title {
  float: left;
  width: 80%;
  height: auto;
}

.nav_recycle {
  float: right;
  margin-top: 25px;
  margin-right: 16px;
  font-size: 12px;
}

.nav {
  width: 100%;
  height: 60px;
  background-color: white;
}

.box_right {
  float: left;
  width: 100%;
  height: auto;
}

a {
  text-decoration: none;
  color: rgb(66, 44, 44);
}
</style>
